<template>
    <div id="myAddress">
        <!--导航栏-->
        <div>
            <van-nav-bar
                    title="我的地址"
                    left-text="返回"
                    right-text="确认"
                    left-arrow
                    :fixed=true
                    :border=true
                    @click-left="onClickLeft"
                    @click-right="onClickRight"
            />
        </div>
        <div style="margin-top: 50px">
            <van-address-list
                    v-model="chosenAddressId"
                    :list="list"
                    default-tag-text="默认"
                    @add="onAdd"
                    @edit="onEdit"
                    @select="giveAddress"
            />
        </div>


        <!--        <transition name="router-slider" mode="out-in">-->
        <!--            <router-view></router-view>-->
        <!--        </transition>-->

    </div>
</template>

<script>
    import {userAddressList} from "@/api/api";
    import {mapMutations} from "vuex";
    import {Toast} from "vant";
    export default {
        created() {
            userAddressList().then((response) => {
                if( response.data.code === 2000){
                    let tempList = response.data.data.address;
                    for(let i = 0; i < tempList.length;i++){
                        let ads = {
                            id: "",
                            name: "",
                            tel: "",
                            address:"",
                            zipCode:"",
                            isDefault: true,
                            areaCode:""
                        };
                        ads.id = tempList[i].id;
                        ads.name = tempList[i].addName;
                        ads.tel = tempList[i].phone;
                        ads.zipCode = tempList[i].zipCode;
                        ads.address = tempList[i].region+"\n"+tempList[i].detailedAddress;
                        ads.isDefault = tempList[i].isDefault === '1';
                        ads.areaCode = tempList[i].areaCode
                        this.list.push(ads);
                    }
                }
            });
        },
        name: "MyAddress",
        data() {
            return {
                chosenAddressId: '1',
                list: [],
                chosenItem:{}
            };
        },

        methods: {
            ...mapMutations(["saveChosenAddress"]),
            onAdd() {
                this.$router.push({
                    path: '/dashboard/addAddress',
                })
            },
            onEdit(item, index) {
                this.$router.push({
                    path: '/dashboard/editAddress',
                    query: {
                        id: item.id,
                        name:item.name,
                        tel:item.tel,
                        zipCode:item.zipCode,
                        detailedAddress:item.address.split('\n')[1],
                        isDefault:item.isDefault,
                        areaCode:item.areaCode
                    }
                })
            },
            onClickLeft() {
                this.$router.go(-1);
            },
            onClickRight() {
                if(this.chosenItem.id === undefined){
                    Toast('请选中地址');
                }else{
                    this.saveChosenAddress(this.chosenItem);
                    this.$router.go(-1);
                }
            },
            giveAddress(item, index){
                this.chosenItem = item;
            }
        },

    }
</script>

<style scoped>
    #myAddress {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color:white;
        z-index: 200;
    }

    .router-slider-enter-active, .router-slider-leave-active {
        transition: all 0.3s;
    }

    .router-slider-enter, .router-slider-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
</style>